<template>
    <div class="rish_trend_page_class">
        <div class="shadow_bg_class"
             style="width: 100%;color: #ffffff;padding: 12px ">
            <el-form ref="filters" :model="filters" label-width="100px">
                <el-row :gutter="20" style="margin-bottom: 0px">

                    <el-col :span="6">
                        <el-form-item label="维度：" style="margin-bottom: 0 !important;">
                            <el-select v-model="filters.dimension" placeholder="请选择" clearable>
                                <el-option
                                        v-for="item in dimensionOptions"
                                        :key="item.id"
                                        :label="item.name"
                                        :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>

                    <el-col :span="6" v-show="filters.dimension=='year'">
                        <el-form-item label="年：" style="margin-bottom: 0 !important;">
                            <el-date-picker
                                    v-model="filters.year"
                                    type="year"
                                    value-format="yyyy"
                                    @change="handleSearchByYear"
                                    placeholder="选择年">
                            </el-date-picker>
                        </el-form-item>

                    </el-col>
                    <el-col :span="6" v-show="filters.dimension=='month'">
                        <el-form-item label="月：" style="margin-bottom: 0 !important;">
                            <el-date-picker
                                    v-model="filters.month"
                                    type="month"
                                    @change="handleSearchByMonth"
                                    value-format="yyyy-MM"
                                    placeholder="选择月">
                            </el-date-picker>
                        </el-form-item>

                    </el-col>
                    <el-col :span="6" v-show="filters.dimension=='day'">
                        <el-form-item label="天：" style="margin-bottom: 0 !important;">
                            <el-date-picker
                                    v-model="filters.day"
                                    type="date"
                                    @change="handleSearchByDay"
                                    format="yyyy-MM-dd"
                                    value-format="yyyy-MM-dd"
                                    placeholder="选择日期">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12" style="display: flex;justify-content: flex-end">
                        <el-button type="primary"
                                   style="background: rgba(255, 255, 255, 0.2);border-color: rgba(255, 255, 255, 0.18);"
                                   @click="handleReport">导出报表
                        </el-button>

                    </el-col>
                </el-row>

            </el-form>

        </div>



        <div style="width: 100%;" id="container" class="shadow_bg_class">
            <el-row>
                <el-col :span="8" v-for="item in riskPositionOpt" :key="item.id">
                    <div style="width: 100%;height: 380px"  :id="item.id"></div>
                </el-col>
            </el-row>
            <div style="text-align: center;padding-bottom: 12px">
                <el-pagination
                        background
                        @current-change="handleCurrentChange"
                        :page-size=6
                        layout="prev, pager, next"
                        :total="riskPositionTotal">
                </el-pagination>
            </div>

        </div>
    </div>

</template>

<script>
    import risk_history_trend_list_page_bus from './risk_history_trend_list_page_bus.js'

    export default risk_history_trend_list_page_bus

</script>
<style>
    .rish_trend_page_class {
        display: block;
        width: 100%;
        height: 100%;
    }

</style>
